<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tiles-server</title>
    <style>
        html, body {
            padding: 0;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            min-width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet"
          href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://openlayers.org/en/v6.4.3/examples/resources/mapbox-streets-v6-style.js"></script>
</head>
<body>
<div id="map"></div>
<script src="olms.js"></script>
<script>
// 图层切换
// https://github.com/walkermatt/ol-layerswitcher

fetch('/static/style/osm_liberty/osm_liberty.json').then(function (response) {
  response.json().then(function (glStyle) {
    var tilelayer = new ol.layer.VectorTile(
      {
        declutter: true,
        source: new ol.source.VectorTile(
          {
            attributions: 'mvt',
            format: new ol.format.MVT(),
            // url: "http://localhost:8900/mbtiles/osm-2018-12-03-v3.9-china_shenzhen/{z}/{x}/{y}.pbf"
            url: glStyle.sources.openmaptiles.tiles[0],
            maxZoom: glStyle.sources.openmaptiles.maxzoom
          }),
      })

    olms.stylefunction(tilelayer, glStyle, 'openmaptiles');
    var map = new ol.Map(
      {
        layers: [tilelayer],
        target: 'map',
        view: new ol.View({
          // wgs84
          // https://www.jianshu.com/p/ac32f0596864
          center: ol.proj.fromLonLat([114.48, 38.03]),
          zoom: 13,
        })
      });
  });
});


// olms.apply('map', '/static/style/osm_liberty/osm_liberty.json')
</script>
</body>
</html>
